<template>
    <div @click="hide" v-show="isShow" class="load-again">
        <div class="load-again-content">
            <img class="load-again-img" src="https://www.mrobiji.com/images/load-again-gray-icon.svg">
            <div class="load-again-explain">轻触屏幕重新加载</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PageEmpty',
    data() {
        return {
            isShow: false,
        }
    },
    methods: {
        show() {
            this.isShow = true
        },
        hide() {
            this.isShow = false
            this.$emit('request')
        },
    }
}
</script>

<style lang="scss" scoped>
/* 重新加载 */
.load-again {
    height: 100%;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;

    .load-again-content {
        margin-top: -40px;
    }

    .load-again-img {
        width: 40px;
    }

    .load-again-explain {
        font-size: 18px;
        color: #999999;
        width: 100%;
        text-align: center;
        margin-top: 25px;
    }
}
/* 重新加载结束 */
</style>